<template>
  <div v-if="rows.length > 0" class="record" v-for="row of rows">
    <div v-for="col of columns">
      <label>{{ col.title }}</label>
      <span>{{ row[col.field] }}</span>
    </div>
  </div>
  <Empty v-else image="search" description="无数据" />
  <Pagination v-if="pagerOption.total > pagerOption.pageSize" v-model="pagerOption.current" :total-items="pagerOption.total" force-ellipses />
</template>
<script setup>
  import { useRoute } from 'vue-router';
  import { ref, reactive, inject, watchEffect, onMounted } from 'vue';
  import { Pagination, Empty } from 'vant';

  const $route = useRoute();
  const $http = inject('$http');

  const props = defineProps({
    table: {
      type: String
    }
  });

  const columns = ref([]);
  const rows = ref([]);

  const pagerOption = reactive({
    pageSize: 10,
    current: 1,
    total: 0
  });

  function getDatas() {
    let dbIndex = $route.params.dbIndex;
    let schema = $route.params.schema;
    let dbType = $route.query.dbtype;
    let tableName = props.table;

    if (dbIndex && schema && tableName) {
      let url = `/api/db/${dbIndex}/${schema}/${tableName}/datas`;
      let so = { pageIndex: pagerOption.current, pageSize: pagerOption.pageSize };

      $http.post(url, so).then(res => {
        pagerOption.total = res.total;

        columns.value = res.columns;
        rows.value = res.datas;

        if (typeof callback == 'function') {
          callback();
        }
      });
    }
  }

  watchEffect(() => getDatas());

  onMounted(() => {
    getDatas();
  });
</script>
<style lang="less" scoped>
  .record {
    background: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    margin-bottom: 5px;
    flex-flow: row wrap;
    justify-content: space-between;

    > div {
      flex: 0 0 33%;
      font-size: 13px;
      white-space: nowrap;
      text-align: left;

      > label {
        font-weight: bold;
        &:after {
          content: '：';
        }
      }

      > span {
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
</style>
